<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['环卫管理', '湖州环卫统计']"
      icon="fa fa-cube"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>湖州环卫统计</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="s2_tableCar">
                  <table-select-car [noCompany]="true" (outerCar)="getSelectCarInfo($event)"></table-select-car>
                </div>

				<div class="top_module">
					<span class="module_text">收运点位</span>
					<div class="s_hover_box">
						<select   class="select2"  id="positionSelect2">
							<option value=''></option>
						</select>
						<div class="s_del_icon" (click)='delPosition()'>x</div>
					</div>
				</div>

                <!-- <div class="selectDate top_module">
									<table-select-date [notInit]="true" (outerTime)="getSelectTableTime($event)" ></table-select-date>
								</div> -->
                <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                <button *ngIf="importBtn" type="button" class="btn btn-primary" (click)="importUp(loadModal)">导入</button>
                <!-- <button type="button" class="btn btn-primary" (click)="export_totle()">导出报表</button> -->
              </div>
              <div class="right top-search" style="width: 290px;">
                <input
                  type="text"
                  [(ngModel)]="tableQueryitem.searchKey"
                  (change)="table_search()"
                  class="search-input"
                  placeholder="车牌号、设备ID、视频设备ID、收运点名称"
                />
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search()">
                    <i class="fa fa-search"></i>
                  </button>
                </span>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>项目名称</th>
                    <th>车牌号码</th>
                    <th>设备ID</th>
                    <th>视频ID</th>
                    <th>收运点位名称</th>
                    <th>收运桶数</th>
                    <th>收运总量（KG）</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>抓拍照片</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData">
                    <td>{{ row.companyName }}</td>
                    <td>{{ row.carNumber }}</td>
                    <td>{{ row.deviceId }}</td>
                    <td>{{ row.videoDeviceId }}</td>
                    <td>{{ row.name }}</td>
                    <td>
                      <button type="button" (click)="viewBarrelAge(row, barrelAgeModal)">{{ row.barrelAge }}</button>
                    </td>
                    <td>{{ row.weight }}</td>
                    <td>{{ row.startTime }}</td>
                    <td>{{ row.endTime }}</td>
                    <td>
                      <button type="button" (click)="viewCapture(row, captureModal)">明细</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCount"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!-- 导入弹窗-->
  <div
    bsModal
    #loadModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="cancelUp(loadModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">上传Excel文件</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <form class="form form-inline" role="form">
              <div class="row" style="margin-bottom: 24px">
                <div class="form-group module_line">
                  <button type="button" class="btn btn-primary" (click)="load_module()">下载模板</button>
                  <span class="row" class="note">注：请先下载模板，采用模板编辑文件后上传</span>
                </div>
              </div>

              <div class="row">
                <!--<label class="control-label col-sm-1" for="imgFile" style="padding: 0;display: inline-block;line-height: 32px;">文件</label>-->
                <div class="col-sm-10" style="padding: 0">
                  <div class="clearfix module_line">
                    <button type="button" class="btn btn-primary" style="width: 120px">
                      上传模板文件
                      <input
                        type="file"
                        class="up"
                        (change)="fileChange($event.target.files)"
                        name="fileToUpload"
                        (click)="clearFile()"
                        [(ngModel)]="fileUp"
                        type="file"
                        placeholder=""
                      />
                    </button>
                    <span class="row" class="note">注：格式excel</span>
                  </div>
                </div>
              </div>
              <div *ngIf="fileToUpload">
                <label class="control-label col-sm-1"></label>
                <div>
                  <ul>
                    <li class="file_list">
                      <i class="fa fa-file-text-o" style="margin-right: 12px"></i>
                      {{ fileToUpload.name }}
                      <i class="fa fa-check-circle green" style="margin-left: 60px"></i>
                    </li>
                  </ul>
                </div>
              </div>
            </form>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="cancelUp(loadModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="submitData(loadModal)">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!--弹窗end-->

  <!--  收运明细-->
  <div
    bsModal
    #barrelAgeModal="bs-modal"
    id="lgModal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg" style="width: 1200px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="clickModalHide(barrelAgeModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">收运明细</h4>
        </div>
        <div class="modal-body">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
            >
              <thead>
                <tr>
                  <th>RFID</th>
                  <th>车牌号码</th>
                  <th>设备ID</th>
                  <th>单桶重量</th>
                  <th>称重时间</th>
                  <th>地址</th>
                  <th>GPS时间</th>
                  <th>坐标</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let row of barrelAgeTableData" class="huanding">
                  <td>{{ row.rfid }}</td>
                  <td>{{ row.carNumber }}</td>
                  <td>{{ row.deviceId }}</td>
                  <td>
                    <div style="display: flex; align-items: center">
                      <!-- 0：净，1：毛，2：皮 -->
                      <img
                        *ngIf="row.type === 0"
                        src="assets/img/weightIcon/jing.png"
                        title="净重"
                        style="width: 28px; margin-right: 4px"
                      />
                      <img
                        *ngIf="row.type === 1"
                        src="assets/img/weightIcon/mao.png"
                        title="毛重"
                        style="width: 28px; margin-right: 4px"
                      />
                      <img
                        *ngIf="row.type === 2"
                        src="assets/img/weightIcon/pi.png"
                        title="皮重"
                        style="width: 28px; margin-right: 4px"
                      />
                      {{ row.weight }}
                    </div>
                  </td>
                  <td>{{ row.carUploadDate }}</td>
                  <td>{{ row.address }}</td>
                  <td>{{ row.gpsUploadDate }}</td>
                  <td>
                    <span *ngIf="row.lng && row.lat">{{ row.lng }},{{ row.lat }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--弹窗end-->

  <!-- 抓拍照片明细 -->
  <div
    bsModal
    #captureModal="bs-modal"
    id="lgModal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg" style="width: 1200px">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="clickModalHide(captureModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">抓拍照片明细</h4>
        </div>
        <div class="modal-body">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
            >
              <thead>
                <tr>
                  <th>所属公司</th>
                  <th>车牌号</th>
                  <th>设备编号</th>
                  <th>视频终端ID</th>
                  <th>通道号</th>
                  <th>抓拍图片</th>
                  <th>抓拍时间</th>
                  <th>上传时间</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let row of captureTableData" class="huanding">
                  <td>{{ row.companyName }}</td>
                  <td>{{ row.carNumber }}</td>
                  <td>{{ row.deviceId }}</td>
                  <td>{{ row.videoDeviceId }}</td>
                  <td>{{ row.channel }}</td>
                  <td><img (click)="showImg($event)" class="imgSrc" [src]="row.url" alt="图片" /></td>
                  <td>{{ row.createTime }}</td>
                  <td>{{ row.downloadTime }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--弹窗end-->
</div>
<style>
  .form-group {
    display: block;
    /* border: 1px solid #ccc; */
    height: 40px;
    line-height: 40px;
    margin-bottom: 5px;
  }
  .form-group .cont {
    border: 1px solid #ccc;
    text-align: left;
  }
  .form-group .cont:first-child {
    border-right: 0px;
  }
  .form-group .cont label {
    text-align: center;
  }
  /* 导入导出的样式 */
  .module_line .btn {
    position: relative;
  }
  .module_line .up {
    opacity: 0;
    position: absolute;
    height: 32px;
    width: 120px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
  }
  .importBtn {
    left: 130px;
    top: 8px;
    position: absolute;
  }
  .file_list {
    line-height: 32px;
    margin-top: 12px;
  }
  .imgSrc {
    width: 50px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
  }
</style>
